<template>
    <div>
        <Tips />

        <!-- 购物车商品列表 -->
        <van-checkbox-group v-model="result">

            <van-checkbox :name="item.id" v-for="item in cartList" :key="item.id" @click="goodsItemClick(item)" :disabled="isEditing">
                <van-swipe-cell>
                    <van-card
                        :num="item.number"
                        :price="item.retail_price.toFixed(2)"
                        :title="item.goods_name"
                        :thumb="item.list_pic_url"
                    />
                    <van-stepper v-model="item.number" v-show="isEditing" @change="stepNumChange(item)"/>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="handleDel(item.product_id)"/>
                    </template>
                </van-swipe-cell>
                
            </van-checkbox>
        </van-checkbox-group>


        <!-- 提交订单栏 -->
        <van-submit-bar :price="checkedGoodsAmount * 100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkedAll" :disabled="isEditing || cartList.length===0">全选</van-checkbox>
            <template #tip>
                 累计共{{goodsCount}}件商品，可点击 
                 <van-button :type="isEditing?'danger':'primary'" size="small" @click="isEditing=!isEditing">
                     {{isEditing?'完成编辑':'编辑'}}
                 </van-button>
                  按钮进行商品数量修改 
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
import Tips from "@/components/Tips"
import {GetCartData,ChangeGoodsChecked,SeptNum, DelGoods} from "@/request/api"
export default {
    components:{
        Tips
    },
    data () {
        return {
      
            // result存放被选中了的checkbox项的name属性
            result: [],

            // 购物车商品列表数据
            cartList:[],

            // 选中的商品的总价
            checkedGoodsAmount:0,
            // 选中和未选中的商品的数量总和
            goodsCount:0,
            
            // 是否处于编辑状态
            isEditing:false
        }
    },
    computed:{
        checkedAll:{
            get(){
                // return 布尔值   true就勾上，false就不勾上
                return this.result.length === this.cartList.length && this.cartList.length!==0
            },
            set(val){
                if(this.isEditing)return;
                console.log("set", val);  // val 是一个布尔值， 就是要更新成的一个值
                // 发起选中的请求，发起的是所有产品的选中和未选中状态的请求

                let ids = this.cartList.map(item=>{
                    return item.product_id
                })
                // console.log(ids.join());
                ChangeGoodsChecked({
                    isChecked:val===false?0:1,
                    productIds:ids.join()   //把当前每一项的product_id传过去
                }).then(res=>{
                    // console.log(res);
                    this.renderData(res.data)
                })
            }
        }
    },
    created(){
        // 获取购物车商品列表信息
        GetCartData().then(res=>{
            console.log(res);
            this.renderData(res.data)
        })
    },
    methods:{
        handleDel(pid){
            DelGoods({
                productIds:pid.toString()
            }).then(res=>{
                this.renderData(res.data)
            })
        },
        stepNumChange(item){
            SeptNum({
                goodsId:item.goods_id,
                id:item.id,
                number:item.number,
                productId:item.product_id
            }).then(res=>{
                this.renderData(res.data)
            })
        },
        renderData(data){
            // 把购物车数据渲染到页面上
            // 在每一次渲染数据之前，this.result需要做一个清空，否则this.result的长度会越来越长， 影响到checkedAll的值有错误
            this.result = []

            let {cartList,cartTotal} = data
            this.cartList = cartList
            this.checkedGoodsAmount = cartTotal.checkedGoodsAmount
            this.goodsCount = cartTotal.goodsCount

            // 选框组的渲染（有没有打钩的渲染）
            // 根据每一项商品数据的checked值， 来给this.result数组添加内容
            this.cartList.map(item=>{
                // if(item.checked){
                //     this.result.push(item.id)
                // }
                item.checked?this.result.push(item.id):"";
            })

            // console.log(this.result);
        },
        onSubmit(){console.log("onSubmit");},
        goodsItemClick(item){
            if(this.isEditing)return;
            // 点击每一项商品的时候发起请求
            ChangeGoodsChecked({
                isChecked:item.checked===1?0:1,
                productIds:item.product_id.toString()
            }).then(res=>{
                this.renderData(res.data);
            })
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .van-checkbox-group{
        padding: .1rem;
        background-color: #fff;
        .van-checkbox{
            padding:.1rem 0;
            border-bottom: 1px solid #ccc;
        }
    }
    /deep/.van-checkbox__label{
        flex:1;
    }
    
    .van-submit-bar{
        bottom: .5rem;
    }
    .van-submit-bar__tip{
        display: flex;
        /* 默认主轴是横向的，align-items是控制侧轴  */
        align-items: center;
        .van-button{
            margin: 0 .06rem;
        }
    }
    .van-card__title{
        font-size: .16rem;
        line-height: .24rem;
        max-height: 100rem;
    }
    .van-stepper{
        text-align: right;
        background-color: #fafafa;
    }
    .delete-button {
        height: 100%;
    }
</style>